window.addEventListener('DOMContentLoaded',function(){
	// 放大镜
	// 获取事件源
	var littleBox = document.querySelector('.top_left_tu');
	var mask = document.querySelector('.mask');
	var bigBox = document.querySelector('.bigBox');
	var bigImg = document.querySelector('.bigImg');
	// 鼠标移动到左边小盒子时的样式
	littleBox.addEventListener('mouseover',function(){
		
		mask.style.display = 'block';
		bigBox.style.display = 'block';
		
	})
	// 鼠标移动遮罩的样式
	littleBox.addEventListener('mousemove',function(e){
		// 遮罩的宽度和高度
		var maskWidth = mask.offsetWidth;
		var maskHeight = mask.offsetHeight;
		// 左边小盒子的宽度和高度
		var littleBoxWidth = littleBox.offsetWidth;
		var littleBoxHeight = littleBox.offsetHeight;
		// 右边大盒子的宽度和高度
		var bigBoxWidth = bigBox.offsetWidth;
		var bigBoxHeight = bigBox.offsetHeight;
		// 右边放大图的宽度和高度
		var bigImgWidth = bigImg.offsetWidth;
		var bigImgHeight = bigImg.offsetHeight;
		
		// 获取鼠标在页面的坐标
		var allX = e.pageX;
		var allY = e.pageY;
		// 获取遮罩的偏移量
		var maskOffX = littleBox.offsetLeft;
		var maskOffY = littleBox.offsetTop;
		// 获取鼠标在遮罩中的坐标并且让遮罩移动使得鼠标在遮罩中心
		var mouseX = allX - maskOffX - maskWidth / 2;
		var mouseY = allY - maskOffY - maskWidth / 2;
		// 判断遮罩是否移出小盒子的边界
		if(mouseX <= 0){
			mouseX = 0;
		}else if(mouseX >= littleBoxWidth - maskWidth){
			mouseX = littleBoxWidth - maskWidth;
		}
		
		if(mouseY <= 0){
			mouseY = 0;
		}else if(mouseY >= littleBoxHeight - maskHeight){
			mouseY = littleBoxHeight - maskHeight;
		}
		// 把鼠标的位置作为遮罩在小盒子里的偏移量
		mask.style.left = mouseX + 'px';
		mask.style.top = mouseY + 'px';
		// 计算右边放大图的移动距离
		// 大图移动距离=遮罩移动距离*大图最大移动距离/遮罩最大移动距离
		var bigImgMoveX = mouseX * (bigImgWidth - bigBoxWidth) / (littleBoxWidth - maskWidth);
		var bigImgMoveY = mouseY * (bigImgHeight - bigBoxHeight) / (littleBoxHeight - maskHeight);
		
		bigImg.style.left = -bigImgMoveX + 'px';
		bigImg.style.top = -bigImgMoveY + 'px';
	})
	
	littleBox.addEventListener('mouseout',function(){
		
		mask.style.display = 'none';
		bigBox.style.display = 'none';
		
	})
	
	var xsImg = document.querySelectorAll('.xs_tu');
	var smImg = document.querySelector('.lit_tu');
	var sm_img = ['detailimgs/banner01.jpg','detailimgs/banner02.jpg','detailimgs/banner03.jpg','detailimgs/banner04.jpg','detailimgs/banner05.jpg'];
	var big_img = ['detailimgs/banner01-1.jpg','detailimgs/banner02-1.jpg','detailimgs/banner03-1.jpg','detailimgs/banner04-1.jpg','detailimgs/banner05-1.jpg'];
	
	for (var i = 0; i < xsImg.length; i++) {
		xsImg[i].setAttribute('data-index',i);
		xsImg[i].addEventListener('mouseover',function(){
			for (var i = 0; i < xsImg.length; i++) {
				xsImg[i].style.border = '';
				var index = this.getAttribute('data-index');
				smImg.src = sm_img[index];
				bigImg.src = big_img[index];
			}
			this.style.border = '2px solid #000';
		})
	}
	
	// 倒计时
	var leave = document.querySelector('.lt');
	
	leaveTime();
	setInterval(leaveTime,1000);
	
	function leaveTime () {
		var goHomeTime = +new Date('2020/12/28 17:00:00');
		var nowTime = +new Date();
		var remainTime = (goHomeTime - nowTime) / 1000;
		var hours = parseInt(remainTime / 60 / 60 % 24);
		hours < 10 ? hours = '0' + hours : hours;
		var minutes = parseInt(remainTime / 60 % 60);
		minutes < 10 ? minutes = '0' + minutes : minutes;
		var seconds = parseInt(remainTime % 60);
		seconds < 10 ? seconds = '0' + seconds : hours;
		leave.innerHTML = hours + '小时' + minutes + '分' + seconds + '秒';
	}
	
	// 选项卡
	var xxk = document.querySelector('.xxk').children;
	var cutter = document.querySelectorAll('.cutter');
	// console.log(xxk);
	// console.log(cutter);
	for (var i = 0; i < xxk.length; i++) {
		xxk[i].setAttribute('data-index',i);
		xxk[i].addEventListener('click',function () {
			for (var i = 0; i < xxk.length; i++) {
				xxk[i].className = '';
			}
			
			this.className = 'currt';
			var index = this.getAttribute('data-index');
			for (var i = 0; i < cutter.length; i++) {
				cutter[i].style.display = 'none';
			}
			cutter[index].style.display = 'block';
		})
	}
	
	// 数量加减
	var topHead = document.querySelector('.sjkh');
	var bottomHead = document.querySelector('.xjkh');
	var article = document.querySelector('.sl_left');
	
	var count = 1;
	topHead.addEventListener('click',function(){
		count++;
		article.innerHTML = count;
		
	})
	bottomHead.addEventListener('click',function(){
		count--;
		count < 1 ? count = 1 : count;
		article.innerHTML = count;
			
	})

	
	// 轮播图
	// 1. 鼠标经过focus时 左右按钮显示隐藏
	var arrow = document.querySelector('.arrow');
	var arrow_l = arrow.querySelector('.arrow_left');
	var arrow_r = arrow.querySelector('.arrow_right');
	var focus = document.querySelector('.main_focus');
	//获取焦点图的宽度
	var focusImgWidth = focus.offsetWidth;
	// 获取ul ol
	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('ol');
	// 声明一个全局的circle变量
	var circle = 0;
	// 声明右侧按钮的变量
	var num = 0;
	
	focus.addEventListener('mouseover', function() {
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		clearInterval(timer);
	})
	focus.addEventListener('mouseout', function() {
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		timer = setInterval(function() {
			// 手动调用右侧按钮点击事件
			arrow_r.click();
		}, 2000)
	})
	// 循环实现小圆圈跟随图片的个数 并且添加点击事件
	for (var i = 0; i < ul.children.length; i++) {
		var li = document.createElement('li');
		li.setAttribute('data-index', i);
		ol.appendChild(li);
		li.innerHTML = i + 1;
		ol.children[0].className = 'current';
		li.addEventListener('mouseover', function() {
			// 干掉其他人
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			// 留下我自己
			this.className = 'current';
			// 获取ol中li 的 自定义属性
			var index = this.getAttribute('data-index');
			// console.log(index);
			// ul.style.left = -index * focusImgWidth + 'px';
			animate(ul, -index * focusImgWidth, 10);
			num = circle = index;
	
		})
	}
	//  克隆ul的第一个li
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	
	// 右侧点击按钮
	arrow_r.addEventListener('click', function() {
	
		if (num == ul.children.length - 1) {
			num = 0;
			ul.style.left = 0;
		}
		num++;
		animate(ul, -num * focusImgWidth, 10);
		circle++;
		if (circle == ol.children.length) {
			circle = 0;
		}
	
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';
	
	})
	// 左侧点击按钮
	arrow_l.addEventListener('click', function() {
	
		if (num == 0) {
			num = ul.children.length - 1;
			ul.style.left = -num * focusImgWidth + 'px';
		}
		num--;
		animate(ul, -num * focusImgWidth, 10);
	
		if (circle == 0) {
			circle = ol.children.length;
		}
		circle--;
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';
	
	})
	
	// 轮播图自动播放功能
	var timer = setInterval(function() {
		// 手动调用右侧按钮点击事件
		arrow_r.click();
	}, 2000)
	
})